<template>
    <!-- 商铺头部信息 -->
    <ShopHeader :shop="shop" />
    <!-- 优惠券领取横向滑动框 -->
    <CouponList />
    <!-- 商品分类 -->
    <!-- 商品列表 -->
    <GoodList v-if="shop.id" :shopId="shop.id" />
</template>

<script setup>
import ShopHeader from '@/components/shop/ShopHeader.vue'
import GoodList from '@/components/shop/GoodList.vue'
import CouponList from '@/components/shop/CouponList.vue'
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { getShopDetail } from '@/api/shop'
import { ElMessage } from 'element-plus'

const route = useRoute()
const router = useRouter()
const shop = ref({})

// 通过 props 接收路由参数，但设置为可选
const props = defineProps({
  id: {
    type: String,
    required: false,
    default: null
  }
})


onMounted(async () => {
  const shopId = props.id || route.query.id
  
  if (!shopId) {
    ElMessage.error('店铺信息不存在')
    router.push('/')
    return
  }

  try {
    const res = await getShopDetail(shopId)
    if (!res) {
      ElMessage.error('获取店铺信息失败')
      router.push('/')
      return
    }
    shop.value = res
  } catch (error) {
    console.error('获取店铺详情失败:', error)
    ElMessage.error('获取店铺信息失败')
    router.push('/')
  }
})

</script>

<style scoped>

</style>




